<script setup lang="ts">
import Map3D from './index.vue'
import geoData from './assets/data/geoData.json'
import bgData from './assets/data/planeGeoData.json'
import barData from './assets/data/barData.json'
import { mapConfig, barConfig, bgConfig } from './assets/data/config'
</script>

<template>
  <div class="root">
    <Map3D :geo-data="geoData" :bar-data="barData" :map-config="mapConfig" :bar-config="barConfig" :bg-data="bgData" :bg-config="bgConfig" />
    <div class="legend">
      <div class="title">图例</div>
      <div>
        <img class="img" src="/img/icons/legend-qyzys.png" width="18" height="18" />
        企业总营收
      </div>
      <div>
        <img class="img" src="/img/icons/legend-qyzss.png" width="18" height="18" />
        企业总税收
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.root {
  // background-color: #1c2123;
  // 背景渐变色
  background: linear-gradient(180deg, #edf5fc 0%, #c4d7f1 100%);
  border: 1px solid #ccc;
  // width: 100%;
  // height: 100%;
  width: 70%;
  height: 800px;
  // transform: translate(100px, 100px);
  margin-top: 10vh;
  margin-left: 200px;
}
.legend {
  display: none;
  position: absolute;
  width: 135px;
  height: 100px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  bottom: 90px;
  right: 500px;
  color: #ccc;
  padding: 12px;
  .title {
    margin-bottom: 8px;
  }
  .img {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 8px;
  }
}
</style>
